<template>
	<view class="moddity-card grace-flex grace-columns xlx-border-radius20 grace-box-shadow ">
		<!-- <img :src="item.imageList[0]" alt="" class="moddity-poster"> -->
		<!-- #ifdef MP-WEIXIN || APP-PLUS -->
		<image  :lazy-load="true"  :src="item.imageList[0]"></image>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<!-- <view class="moddity-poster" v-lazy:background-image="{ src: item.imageList[0] }"></view> -->
		<img  v-lazy="item.imageList[0]" class="moddity-poster">  
		<!-- #endif -->
		<view class="moddity-description">
			<view class="grace-bold">{{ item.name }}</view>
			<view class="grace-text grace-gray moddity-details xlx-font-hide3">{{ item.description }}</view>
			<view class="grace-flex grace-space-between moddity-details-price">
				<view class="grace-line-through xlx-font-red xlx-font-size12">原价：￥{{ formateMoney(item.originalPrice) }}</view>
				<view class="xlx-font-size12 grace-bold">现价：￥{{ formateMoney(item.currentPrice) }}</view>
				<view class="xlx-font-size12 moddity-back-cash xlx-font-color-white xlx-border-radius10">最高返￥{{ formateMoney(item.commission1, item.commission2, item.commission3) }}</view>
				<view class="xlx-font-size12">库存：{{ item.stockCount }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { money } from '@/common/utils/formate-validate.js';

export default {
	props: {
		item: {
			type: Object
		}
	},
	data() {
		return {};
	},
	methods: {
		formateMoney(val, val1, val2) {
			// 最高返现处理
			let data = val;
			if (val1) {
				data = data + val1;
				if (val2) {
					data = data + val2;
				}
			}
			return money(data);
		}
	}
};
</script>

<style lang="scss">
.moddity-card {
	margin: 10px 0;
	overflow: hidden;
	background: #ffffff;
}

.moddity-poster {
	width: 100%;
	height: 420upx;
	background-size: 100% 100%;
}
.moddity-description {
	padding: 5px;
}
.moddity-details {
	font-size: $uni-font-size-sm;
}
.moddity-details-price {
	padding-top: 20upx 
}
.moddity-back-cash{
	background: #dc5502;
	padding: 3upx 10upx;
}
</style>
